
<template>
  <div class="box">
    <div class="wrap">
      <h1 style="color:red">App</h1>

      <router-link to="/App" :class="menuClass1" @click="show(1)">
        <img class="icon" src="./assets/logo.svg" />
        App
      </router-link>
      <router-link to="/App2" :class="menuClass2" @click="show(2)">
        <img class="icon" src="./assets/logo.svg" />
        App2
      </router-link>
      <router-link to="/App25" :class="menuClass25" @click="show(25)">
        <img class="icon" src="./assets/logo.svg" />
        App25购物车
      </router-link>
      <router-link to="/App3" :class="menuClass3" @click="show(3)">
        <img class="icon" src="./assets/logo.svg" />
        App3动画
      </router-link>
    </div>

    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "AppRouter",
  data() {
    return {
      currentItem: -1
    };
  },
  computed: {
    menuClass1() {
      return {
        item1: true,
        "item-active": this.currentItem === 1
      };
    },
    menuClass2() {
      return {
        item1: true,
        "item-active": this.currentItem === 2
      };
    },
    menuClass25() {
      return {
        item1: true,
        "item-active": this.currentItem === 25
      };
    },
    menuClass3() {
      return {
        item1: true,
        "item-active": this.currentItem === 3
      };
    }
  },
  methods: {
    show: function(index) {
      this.currentItem = index;
      if (index === 1) {
        this.$router.push({ path: "/App" });
      } else if (index === 2) {
        this.$router.push({ name: 'App2', params: { id: 1 } });
      } else if (index === 25) {
        this.$router.push({ path: "/App25", query: { id: 1 } });
      } else if (index === 3) {
        this.$router.push({ path: "/App3" });
      }
    }
  }
};
</script>
<style scoped>
.box {
  display: flex;
}
.wrap {
  width: 250px;
  height: 100vh;
  background: #001528;
}
.icon {
  width: 20px;
  height: 20px;
  margin-left: 60px;
  margin-right: 20px;
}
.item1 {
  display: flex;
  align-items: center;
  height: 60px;
  line-height: 60px;
  flex: 1;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.item-active {
  background: #0084ff;
}
</style>
